iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

Hugo 貼身打造個人部落格系列 第 7

Day 07. Hugo Theme Tranquilpeak

  • 分享至 

  • xImage
  •  

前言

今天介紹當你在選定一個佈景後,可以先從哪幾個地方下手「客製化」成你要的網站,並以筆者自身使用的部落格為例去說明。

Tranquilpeak

Tranquilpeak 是一款在視覺佈局上很適用於個人部落格撰文的 Hugo Themes (個人感覺),建議在選用佈景時閱讀一下官方文件、並去試著做以下這幾件事:

改 config 配置

佈景提供了 config 設置範例 (有些作者會補充說明,註解在 config 裡面) 給大家參考,放在 exampleSite 中,建議可以先以這份 config 為基礎去改設置參數;

佈景本身也有提供 default 的 config,通常會放在該佈景第一層目錄底下,有個 theme.toml,要用哪一份開始設置就看個人。

順帶一提,筆者一開始也用過 Even 這款佈景,這兩套都還蠻乾淨的,只是相比之下更喜歡 Tranquilpeak 的 config (附上 Even 的 config 給大家參考看看)。

透過 demo 知道佈景可以做到哪些事

是的,佈景也是有他各自不同的工具,能提供你讓你方便做到不同的事情,你可以先逛逛 Tranquilpeak (或其他)佈景 online demo,這能讓你不用本地套用,就可以直接先看看套用後整體呈現的效果、網站的布局會長什麼樣子;

但不論你是使用哪種佈景,在配置上都萬變不離其宗 (若你喜歡的佈景做不到,但有看到別的佈景有,理論上自己也能仿照實作出來,不過門檻會稍微高一點)。

安裝佈景 again

前幾天講 Hugo New Site 時,有提到佈景是透過 git submodule add 方式安裝的,不過筆者是直接 clone 到本地,將 clone 下來的專案放到 hugo site 資料夾 themes 底下,雖然這跟使用 git submodule 安裝方式不同,但結果上是同樣意思(目前覺得都一樣),就看個人選擇要用哪一種方式去安裝。

clone the theme

執行以下指令 clone theme repo 到你專案底下的 themes 資料夾中:

git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/tranquilpeak

copy the example config.toml

你可以先複製他提供的範例配置,之後依需求改變部分設置參數,這樣就不用重頭到尾自己設定:

cp themes/tranquilpeak/exampleSite/config.toml ./config.toml

配置範例

以下是筆者自己的網站一小部分(基本)設置:

baseURL = "https://blog.genesu.me/" # 部署到線上之後要使用的主要域名 = FQDN
defaultContentLanguage = "zh-tw"    # 預設語系
title = "高級伴讀書僮"                # 網站 title
theme = "tranquilpeak"              # 指定使用的佈景 (與資料夾名稱一樣)
paginate = 7                        # 每頁顯示幾筆文章
canonifyurls = true                 # 設為 true 讓全站資源網址都套用 baseURL

在本地跑起來看看

使用 hugo server 在本地執行觀看結果:

佈景使用文件

Tranquilpeak 作者提供了兩種使用文件,User Document 詳列了佈景提供的各種可調功能、工具,另一種專門提供給開發者使用,如果想要微調佈景的 code 可以 Fork 一份回來,參考文件之後修改看看。

小結

本篇介紹了筆者自己正在用的佈景,並試著從新手不會用的時候,建議各位可以先碰哪幾塊,藉此逐步打造出自己想要的網站呈現方式,try 出自己想像中的風格。

題外話

從本篇開始之後會盡量改用「筆者」替代「我」去撰寫文章,感覺上用詞比較客觀(?)。

參考連結


上一篇
Day 06. Hugo Theme 佈景
下一篇
Day 08. Hugo Config 介紹
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
alicexdcw
iT邦新手 5 級 ‧ 2021-05-30 10:21:19

您好我想請問 我把theme 改成 "tranquilpeak" ,下 hugo server -D,文章就不會顯示了耶
(如果改成之前作者下載的ananke又可以顯示了)

看更多先前的回應...收起先前的回應...
alicexdcw iT邦新手 5 級 ‧ 2021-05-30 11:30:00 檢舉

找到原因了,在tranquilpeak的theme中我把 content裡面的posts資料夾名稱改成了post,請問如果不改資料夾名稱,要從哪裡改首頁預設的路徑posts呢?

/images/emoticon/emoticon12.gif

雖然我沒測試
但應該能從他佈景本身寫的 code 去改讀 posts

https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/layouts/_default/single.html

另外可以參考作者寫的另外這份給開發者看的文件,找找看看是否有相關資訊 try try
https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/developer.md

alicexdcw iT邦新手 5 級 ‧ 2021-06-05 09:18:53 檢舉

好的 謝謝~

alicexdcw iT邦新手 5 級 ‧ 2021-06-05 09:52:48 檢舉

不好意思我還有一個問題就是在顯示文章列表時,他會隨著內容的多寡而調整高度 請問筆者知道有什麼方法可以固定嗎?

alicexdcw iT邦新手 5 級 ‧ 2021-06-05 10:24:45 檢舉

抱歉 找到方法了=)) 原來要寫在 <!--more-->底下

我要留言

立即登入留言